<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drink</title>
    <style>
        .center {
            text-align: center;
        }

        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
           
            position: relative;
            display: inline-block;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>
    <div class="dropdown">
        <button class="dropbtn">请选择</button>
        <div class="dropdown-content">
            <a href="#" id="aa">少年</a>
            <a href="#" id="bb">青年</a>
            <a href="#" id="cc">老年</a>
        </div>
    </div>
    <div class="center a">
        <h3>（少年）推荐喝水量：2500ml</h3>
        <label for="height">身高：</label>
        <input type="text" id="height" placeholder="请在此处输入身高"> cm</br>
        <label for="weight">体重：</label>
        <input type="text" id="weight" placeholder="请在此处输入体重"> kg </br></br>
        <button id="btn">确定</button></br></br>
        每日饮水量为： <span id="data"> </span></br>
        <h3 id="aaa"></h3>
    </div>
    <div class="center b">
        <h3>（青年）推荐喝水量：2300ml</h3>
        <label for="height-2">身高：</label>
        <input type="text" id="height-2" placeholder="请在此处输入身高"> cm</br>
        <label for="weight-2">体重：</label>
        <input type="text" id="weight-2" placeholder="请在此处输入体重"> kg </br></br>
        <button id="btn-2">确定</button></br></br>
        每日饮水量为： <span id="data-2"> </span></br>
        <h3 id="bbb"></h3>
    </div>
    <div class="center c">
        <h3>（老年）推荐喝水量：2000ml</h3>
        <label for="height-3">身高：</label>
        <input type="text" id="height-3" placeholder="请在此处输入身高"> cm</br>
        <label for="weight-3">体重：</label>
        <input type="text" id="weight-3" placeholder="请在此处输入体重"> kg </br></br>
        <button id="btn-3">确定</button></br></br>
        每日饮水量为： <span id="data-3"> </span></br>
        <h3 id="ccc"></h3>
    </div>

    <script>
        var get = function (selector) {
            return document.querySelector(selector)
        }
        var dd = function (dom, num, range) {
            get(dom[0]).addEventListener('click', function (e) {
                var h = get(dom[1]).value - 0
                var w = get(dom[2]).value - 0
                var s = h / 2 + w * range
                var d = get(dom[3]).innerHTML = `${s}ml`
                console.log(d,num)
                if (s > num) {
                    get(dom[4]).innerHTML = `水量充足！`
                } else {
                    get(dom[4]).innerHTML = `水量缺乏！`
                }
            })
        }
        dd(['#btn', '#height', '#weight', '#data', '#aaa'], 2500, 40)
        dd(['#btn-2', '#height-2', '#weight-2', '#data-2', '#bbb'], 2300, 35)
        dd(['#btn-3', '#height-3', '#weight-3', '#data-3', '#ccc'], 2000, 30)
        var change = function (selector1, selector2,selector3,selector4) {
            var s = document.querySelector(selector1)
            var a = document.querySelector(selector2)
            var aa = document.querySelector(selector3)
            var aaa = document.querySelector(selector4)
            s.addEventListener('click', function() {
                a.style.display = 'block'
                aa.style.display = 'none'
                aaa.style.display = 'none'
            })
        }
        change('#aa','.a','.b','.c')
        change('#bb','.b','.a','.c')
        change('#cc','.c','.b','.a')

    </script>
</body>

</html>